import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts'
import { px } from '../px';
import { baseEchartsOptions } from '../shared/base-echarts-options';
import { createChartsOptions } from '../shared/create-echarts-options';

export const Chart1 = () => {
    const divRef = useRef(null)
    const myEcharts = useRef(null)
    let data = [
        { name: '城关区', value: 18 },
        { name: '七里河区', value: 11 },
        { name: '西固区', value: 32 },
        { name: '安宁区', value: 4 },
        { name: '红古区', value: 51 },
        { name: '丰登区', value: 16 },
        { name: '换兰区', value: 27 },
        { name: '书中区', value: 20 },
        { name: '兰州新区', value: 28 },
    ]
    useEffect(() => {
        setInterval(() => {
            let newData = [
                { name: '城关区', value: Math.random() * 10 },
                { name: '七里河区', value: 11 },
                { name: '西固区', value: Math.random() * 8  },
                { name: '安宁区', value: 4 },
                { name: '红古区', value: Math.random() * 20 },
                { name: '丰登区', value: 16 },
                { name: '换兰区', value: Math.random() * 12  },
                { name: '书中区', value: 20 },
                { name: '兰州新区', value: Math.random() * 7  },
            ]
            x(newData)
        }, 2000)
    }, [])
    let x = (data) => {
        var option = {
            ...baseEchartsOptions,
            xAxis: {
                data: data.map(i => i.name),
                axisLabel: {
                    fontSize: px(12),
                    formatter(val) {
                        if (val.length > 2) {
                            let arr = val.split('')
                            arr.splice(2, 0, '\n')
                            return arr.join('')
                        } else {
                            return val
                        }
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                // type: 'category',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    symbolSize: [0, 20],
                },
                axisLabel: {
                    fontSize: px(12)
                }
            },
            series: [
                {
                    type: 'bar',
                    data: data.map(i => i.value),
                }
            ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myEcharts.current.setOption(createChartsOptions(option));
    }
    useEffect(() => {
        myEcharts.current = echarts.init(divRef.current)
        // 指定图表的配置项和数据
        x(data)
    }, [])
    return (
        <div className='bordered 管辖统计'>
            <h2>案发派出所管辖统计</h2>
            <div className='chart' ref={divRef}></div>
        </div>
    )
}